<template>
    <div>
        <h1>会员显示列表</h1>
        会员昵称数据检索
        <input type="text" v-model="datalist.uname">
        会员年龄进行范围数据检索
        <input type="text" v-model="datalist.age1">
        <input type="text" v-model="datalist.age2">
        会员等级数据检索
        <select v-model="datalist.xlk">
            <option value="0">请选择</option>
            <option v-for="a in dataxlk" :value="a.DId">{{a.Dname}}</option>
        </select>
        <input type="button" value="查询" @click="getdata">
        <input type="button" value="重置" @click="cz">
        <a href="https://localhost:7258/api/Hui/Daochu">导出</a>
        <table class="table">
            <thead>
                <tr>
                    <td>会员id</td>
                    <td>会员名称</td>
                    <td>会员年龄</td>
                    <td>会员等级外键</td>
                    <td>会员图片</td>
                    <td>会员状态</td>
                   
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{a.HId}}</td>
                    <td>{{a.Hname}}</td>
                    <td>{{a.Age}}</td>
                    <td>{{a.Dname}}</td>
                    <td>
                        <img :src="'https://localhost:7258/'+a.HuiTupian" style="width: 100px;height: 100px;">
                    </td>
                    <td>{{a.Hstate?'启用':'禁用'}}</td>
                    
                    <td>
                        <input type="button" value="修改" @click="gai(a.HId)">
                        <input type="button" :value="a.Hstate?'启用':'禁用'" @click="zhuangtai(a.HId)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    当前第{{datalist.pagindex}}页，每页{{datalist.pagsize}}条，一共{{datazong.zongtiao}}条，一共{{datazong.zongye}}页
    <input type="button" value="首页" @click="fanye(1)">
    <input type="button" value="上一页" @click="fanye(2)">

    <input v-for="b in datazong.zongye"  type="button" :value="b" @click="zhiding(b)">

    <input type="button" value="下一页" @click="fanye(3)">
    <input type="button" value="尾页" @click="fanye(4)">
    <select v-model="datalist.pagsize" @click="rong">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input type="number" v-model="jun" @change="tiaozhuan(jun)" style="width: 50px;">
    <br>
    <a href="/">登录</a>
    <br>
    <a href="/Hadd">会员添加</a> 
    <br>
    <a href="/DAdd">等级添加</a> 
    <br>
    <a href="/Dlist">等级显示列表</a> 
    <br>
    <a href="/qylist">权益显示列表</a> 
</template>
<script setup lang="ts">

import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
//实例化
const router=useRouter();
const route=useRoute();
const dataxlk=ref([{
    "DId": 0,
    "Dname": "",
    "QuanYi": "",
    "QYwj": 0,
    "Dstate": true
  }]);
const data=ref([{
      "Hname": "李四",
      "HuiTupian": "/pic/2.jpg",
      "HId": 3,
      "Age": 27,
      "DJwj": 2,
      "Hstate": true,
      "Hmima": "1234",
      "DId": 2,
      "Dname": "金卡会员",
      "QuanYi": "免费停车",
      "QYwj": 1,
      "Dstate": true
}]);
//重置
const cz=()=>{
    datalist.value={
        uname:"",
    age1:0,
    age2:0,
    xlk:0,
    pagindex:1,
    pagsize:2
    }
    getdata();
}
//修改状态
const zhuangtai=(val:any)=>{
    if(!confirm("您真的要修改状态吗？"))
    {
        return;
    }
    axios.delete("https://localhost:7258/api/Hui/StateHui",{params:{id:val}}).then(res=>{
        if(res.data>0)
        {
            alert("状态修改成功");
            getdata();
        }
        else
        {
            alert("状态修改失败");
        }
    })
}
///修改
const gai=(val:any)=>{
    if(!confirm("您真的要修改吗？"))
    {
        return;
    }
    router.push({path:"/gai",query:{id:val}})
}
//条件model
const datalist=ref({
    uname:"",
    age1:0,
    age2:0,
    xlk:0,
    pagindex:1,
    pagsize:2
})
//总Model
const datazong=ref({
    zongtiao:0,
    zongye:0
})
//跳转
const jun=ref<number>();
const tiaozhuan=(val:any)=>{
    if(val>=1 && val<=datazong.value.zongye)
    {
        datalist.value.pagindex=val;
        getdata();
    }
}
const xlk=()=>{
    axios.get("https://localhost:7258/api/Hui/BangDeng").then(res=>{
        dataxlk.value=res.data;
    })
}
//页容量
const rong=(val:any)=>{
    datalist.value.pagsize==val;
    getdata();
}
//指定页
const zhiding=(val:any)=>{
    datalist.value.pagindex=val;
    getdata();
}
//翻页
const fanye=(val:any)=>{
    if(val==1)
    {
        datalist.value.pagindex=1;
        getdata();
    }
    if(val==2)
    {
        if(datalist.value.pagindex>1)
        {
            datalist.value.pagindex -=1;
            getdata();
        }
    }
    if(val==3)
    {
        if(datalist.value.pagindex<datazong.value.zongye)
        {
            datalist.value.pagindex +=1;
            getdata();
        }
    }
    if(val==4)
    {
        datalist.value.pagindex=datazong.value.zongye
        getdata();
    }
}
const getdata=()=>{
    debugger
    axios.get("https://localhost:7258/api/Hui/ShowHui",{params:datalist.value}).then(res=>{
        data.value=res.data.list;
        //计算总条数
        datazong.value.zongtiao=res.data.data;
        datazong.value.zongye=Math.ceil(datazong.value.zongtiao/datalist.value.pagsize);
    })
}
onMounted(()=>{
    getdata();
    xlk();
})















</script>

<style scoped>

</style>